<template>
  <div class="main-content">
    <div style="width: 70%; margin: 30px auto; min-height: 1000px">
      <div style="text-align: center">
        <h3 v-if="courseCatalogData.chapterTitle" style="font-size: 20px; font-weight: 550; color: #333333; margin-bottom: 20px">{{ courseCatalogData.chapterTitle }}</h3>
      </div>
      <!-- 章节视频资料 -->
      <div v-if="courseCatalogData.video" style="display: flex; justify-content: center;">
        <video :src="courseCatalogData.video" controls style="width: 80%; max-height: 400px;"></video>
      </div>

      <!-- 章节内容 -->
      <div v-if="courseCatalogData.sectionTitle" style="margin-top: 20px">
        <div style="font-size: 18px; margin-bottom: 10px;">章节概要</div>
        <div>{{ courseCatalogData.sectionTitle }}</div>
      </div>

      <!-- 章节详细内容 -->
      <div v-if="courseCatalogData.content !== null" style="margin-top: 20px">
        <div style="font-size: 18px; margin-bottom: 10px;">详细内容</div>
        <div v-html="courseCatalogData.content"></div>
      </div>
      <!-- content为null时的提示 -->
      <div v-else style="margin-top: 20px; color: #999999; font-size: 14px;">
        该章节暂无详细内容。
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      coursecatalogId: '', // 初始化课程目录ID
      courseCatalogData: {} // 初始化章节数据
    };
  },
  mounted() {
    // 获取路由参数中的课程目录ID
    this.coursecatalogId = this.$route.query.id;
    console.log('Course Catalog ID:', this.coursecatalogId); // 打印课程目录ID
    // 加载章节数据
    this.loadCourseCatalog();
  },
  methods: {
    loadCourseCatalog() {
      // 使用后台API获取课程目录详情数据
      this.$request.get(`/courseCatalog/selectById1/${this.coursecatalogId}`)
          .then(res => {
            console.log('Response:', res); // 打印响应数据以便调试
            if (res) {
              console.log('Course Data:', res); // 打印课程数据
              this.courseCatalogData = res; // 更新章节数据
              console.log('Bound Course Data:', this.courseCatalogData); // 打印绑定后的课程数据
            } else {
              this.$message.error('未找到课程数据'); // 处理错误情况
            }
          })
          .catch(error => {
            console.error('Error fetching course catalog detail:', error);
            this.$message.error('获取课程数据出错，请稍后重试');
          });
    }
  }
};


</script>



